<template>
  <div id="Home">
    <el-container class="h-screen">
      <el-aside
        :width="isCollapse ? '64px' : '200px'"
        class="bg-[#304156] h-full"
      >
        <!---logo和标题-->
        <div class="flex items-center mt-5 text-sm italic text-white h-14">
          <img src="../../assets/images/logo.jpg" class="w-8 h-8 mx-4" />
          <h3 v-show="!isCollapse">{{ appTitle }}</h3>
        </div>
        <!--左侧菜单-->
        <el-menu
          background-color="#304156"
          text-color="#fff"
          :router="true"
          unique-opened
          :collapse="isCollapse"
          :collapse-transition="false"
          :default-active="router.path"
        >
          <!--无子集菜单-->
          <el-menu-item
            :index="'/' + item.url"
            v-for="item in noChildren"
            :key="item.menu_name"
          >
            <i class="mr-2" :class="item.icon"></i>
            <template #title>
              <span>{{ item.menu_name }}</span>
            </template>
          </el-menu-item>
          <!--有子集菜单-->
          <el-sub-menu
            :index="item.menu_id + ''"
            v-for="item in hasChildren"
            :key="item.menu_id"
          >
            <template #title>
              <i class="mr-2" :class="item.icon"></i>
              <span>{{ item.menu_name }}</span>
            </template>
            <el-menu-item
              :index="'/' + subItem.url"
              v-for="subItem in item.menuSvoList"
              :key="subItem.menu_id"
            >
              <template #title>
                <i class="mr-2" :class="subItem.icon"></i>
                <span>{{ subItem.menu_name }}</span>
              </template>
            </el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header class="bg-[#f9fafc] items-center justify-between flex">
          <div
            v-if="!isCollapse"
            @click="toggleCollapse"
            class="pt-2 text-2xl cursor-pointer"
          >
            <i-ep-fold />
          </div>
          <div
            v-if="isCollapse"
            @click="toggleCollapse"
            class="pt-2 text-2xl cursor-pointer"
          >
            <i-ep-expand />
          </div>
          <div class="fixed pt-2 ml-10">
            <el-breadcrumb separator="/">
              <el-breadcrumb-item
                v-for="(item, index) in breadcrumbData"
                :key="'/' + item.url"
                :to="{
                  path: index == breadcrumbData.length - 1 ? '' : item.url,
                }"
              >
                {{ item.menu_name }}
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <HeadImage />
        </el-header>
        <Tags />
        <el-main class="bg-[#eaedf1] flex h-full">
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref, watch } from 'vue'
import { LoginStore } from '@/store/login'
import { useRoute } from 'vue-router'
import HeadImage from '@/components/HeadImage/index.vue'
import Tags from '@/components/Tags/index.vue'
const loginStore = LoginStore()
const router = useRoute()
//获取左侧菜单
const leftMenuList = loginStore.leftMenuList

const appTitle = import.meta.env.VITE_APP_TITLE

let isCollapse = ref<boolean>(false)

const toggleCollapse = () => {
  isCollapse.value = !isCollapse.value
}

//获取面包屑
function findParent(data: any, target: any, result: any) {
  for (let item of data) {
    if ('/' + item.url === target.url) {
      //将查找到的目标数据加入结果数组中
      result.value.unshift({ url: item.url, menu_name: item.menu_name })
      return true
    }
    if (item.menuSvoList && item.menuSvoList.length > 0) {
      //根据查找到的结果往上找父级节点
      let isFind = findParent(item.menuSvoList, target, result)
      if (isFind) {
        result.value.unshift({ url: item.url, menu_name: item.menu_name })
        return true
      }
    }
  }
  //走到这说明没找到目标
  return false
}
let breadcrumbData = ref<{ url: string; menu_name: string }[]>([])
//监听路由变化，获取面包屑
watch(
  () => router.path,
  (newValue: any) => {
    breadcrumbData.value = []
    findParent(leftMenuList, { url: newValue }, breadcrumbData)
  },
  { immediate: true }
)

//无子菜单
const noChildren = computed(() => {
  return leftMenuList.filter((item) => {
    return !item.menuSvoList
  })
})

//有子菜单
const hasChildren: any = computed(() => {
  return leftMenuList.filter((item) => {
    return item.menuSvoList
  })
})
</script>
<style scoped>
#s {
  background-color: hsl(213, 28%, 26%);
}
</style>
